<template>
    <div>
        <!-- 粒子特效背景 -->
        <vue-particles
		         class="p-background"
		         color="#2196F3"
		         :particleOpacity="0.7"
		         :particlesNumber="100"
		         shapeType="circle"
		         :particleSize="5"
		         linesColor="#97D0F2"
		         :linesWidth="1"
		         :lineLinked="true"
		         :lineOpacity="0.4"
		         :linesDistance="150"
		         :moveSpeed="3"
		         :hoverEffect="true"
		         hoverMode="grab"
		         :clickEffect="true"
		         clickMode="push">
        </vue-particles>
        <div class="p_kuang">
            <h3 id="p_titie">
                为您推荐以下伙伴
                <br/>
                <br/>
                <div id="shuaxin_button">
                    <el-button type="primary" plain @click="shuaxin">刷新</el-button>
                </div>
                <hr/>
            </h3>

            <div id="p_text">
                <div class="p_block" v-for="i in partner" :key="i" >
                    {{i}}
                </div>
            </div>

        </div>
    </div>
</template>

<script>
// import Mock from './api/P_recommend.js';
export default {
    data(){
        return{
            // partner:[
            //     "asdfsdf",
            //     "sdfsdfsdsdf",
            //     "sdfsdf",
            //     "kjhihnnjo",
            //     "asdfsdf",
            //     "sdfsdfsdsdf",
            //     "sdfsdf",
            //     "kjhihnnjo",
            //     "asdfsdf",
            //     "sdfsdfsdsdf",
            //     "sdfsdf",
            //     "kjhihnnjo",
            //     "asdfsdf",
            //     "sdfsdfsdsdf",
            //     "sdfsdf",
            //     "kjhihnnjo",
            // ],
            partner:[],
        }
    },
    // 初始
    created(){
        this.getPartnerInfo()
    },
    methods:{
        // get请求 获得伙伴列表
        async getPartnerInfo(){
            // get方法请求  地址 与 参数（参数最好定义到data中）
            const { data:res} = await this.$http.get('table/recommend')

            if(res.status !==200){
                return this.$message.error('获取推荐伙伴信息失败')
            }
            console.log(res)

            this.partner=res.data
            this.partner=res.data.slice(0,21)
        },
        shuaxin(){
            this.getPartnerInfo()
        }

    }
}
</script>

<style  scoped>
.p-background{
    /* width: 1128px;
    height: 835px; */
    width: 93%;
    height:94%;
    position: absolute;
    z-index:0;
    background: linear-gradient(to bottom, #85D8CE, #fff);
}
.p_kuang{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color:#fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 30px;
    height: 600px;
    width: 820px;
    opacity:0.9;
}
/* 水平布局 */
#p_text{
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
/* 呈现每一个伙伴 */
.p_block{
    width: 240px;
    height: 50px;
    font-size: 20px;
    text-align: center;

}
#p_titie{
    margin-top: 30px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 30px;
}
#shuaxin_button{
    margin-bottom: 20px;
}

</style>

